<template>
  <div class="change-class body-bg">
    <div v-if="!initLoading">
      <ul class="change-content" v-if="list.length">
        <li class="change-items border-bottom" v-for="(item,index) in list" :key="index">
          <span class="zhuanban-state" :style="{background: item.status == '3' ? '#4BB3FD' : '#BFBFBF'}">{{item.status == '3' ? '已转入' : '已转出'}}</span>
          <div class="head-name">
            <img class="head-img" :src="item.student_avatar || '/static/images/user.png'" alt="头像">
            <p class="name">{{item.student_name}}</p>
          </div>
          <div class="class-infor">
            <div class="class-top">
              <p class="class-name overflow-tow">{{item.goods_name}}</p>
              <span class="change-btn" v-if="item.status == '3'" @click="changeClass(item.campus_telephone)">转班</span>
            </div>
            <div class="class-bottom">
              <p><img src="/static/images/changeClass/icon1.png" alt="icon">{{item.teacher_name}}</p>
              <p><img src="/static/images/changeClass/icon2.png" alt="icon">{{item.finish_lesson}}/{{item.lesson_total}}</p>
            </div>
            <div class="class-bottom">
              <p><img src="/static/images/changeClass/icon3.png" alt="icon">{{item.open_date}}</p>
              <p><img src="/static/images/changeClass/icon4.png" alt="icon"><span class="overflow-one">{{item.campus_name}}</span></p>
            </div>
          </div>
        </li>
        <li v-if="isReachBottom" class="pull-loading"><van-loading type="spinner" size="20px" color="#1989fa" /></li>
        <li v-if="isBottom" class="bottom-line">-- 亲，已经到最后了--</li>
      </ul>
      <div v-else class="empty">
        <img src="/static/images/empty-icon.png" alt="空">
        <p class="empty-tips">暂时还没有可转班级哦</p>
      </div>
    </div>
    <div v-else class="init-loading"><van-loading type="spinner" color="#1989fa" /></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      initLoading: true, // 初始加载
      isBottom: false, // 是否加载完全部数据
      isReachBottom: false, // 是否显示加载状态
      curr_page: 1,
      page_size: 10,
      total: "",
      list: []
    }
  },
  onLoad() {
    this.getShiftWorkList();
  },
  // 下拉刷新
  onPullDownRefresh: function() {
    this.curr_page = 1;
    this.isReachBottom = false;
    this.isBottom = false;
    this.getShiftWorkList();
  },
  // 上拉加载
  onReachBottom () {
    if(this.isBottom) return;
    this.isReachBottom = true;
    this.getShiftWorkList();
  },
  methods: {
    changeClass(tel) {
      wx.navigateTo({
        url: `/pages/changeClassDet/main?tel=${tel}`,
      })
    },
    // 获取列表
    getShiftWorkList() {
      wx.showNavigationBarLoading() //在标题栏中显示加载
      if(this.isReachBottom) {
        this.curr_page++;
      }
      this.$fetch.shiftWork({
        curr_page: this.curr_page,
        page_size: this.page_size
      }).then(res=>{
        wx.hideNavigationBarLoading() //在标题栏中隐藏加载
        wx.stopPullDownRefresh(); //完成停止加载
        this.initLoading = false;
        this.total = res.result.total;
        let len = 0;
        if(this.isReachBottom) {
          this.list = [...this.list, ...res.result.data];
          len = this.list.length;
          if(len >= this.total){
            this.isBottom = true;
          }
          this.isReachBottom = false;
          return
        }
        this.list = res.result.data;
        len = this.list.length;
        if(len >= this.total){
          this.isBottom = true;
        }
      }).catch(err=>{
        this.initLoading = false;
        this.isReachBottom = false;
        wx.hideNavigationBarLoading() //在标题栏中隐藏加载
        wx.stopPullDownRefresh(); //完成停止加载
      })
    },
  },
}
</script>

<style lang="less" scope>
.change-class{
  width: 100%;
  height: 100vh;
  .change-content{
    width: 100%;
    .change-items{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      background: #fff;
      padding: 16px 18px 16px 22px;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      &:last-child{
        border-bottom: 0;
      }
      .head-name{
        width: 110px;
        margin-top: 1px;
        .head-img{
          min-width: 55px;
          width: 55px;
          height: 55px;
          border-radius: 100%;
          display: block;
        }
        .name{
          width: 100%;
          font-size: 14px;
          color: #666;
          font-weight: bold;
          text-align: center;
          margin-top: 15px;
        }
      }
      .zhuanban-state{
        width: 50px;
        height: 16px;
        display: flex;
        align-items: center;
        text-indent: 6px;
        font-size: 10px;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        &::after{
          content: "";
          width: 20px;
          height: 20px;
          background: #fff;
          position: absolute;
          top: 5px;
          right: -10px;
          transform: rotate(45deg);
        }
      }
      .class-infor{
        flex-grow: 1;
        margin-left: 26px;
        .class-top{
          display: flex;
          width: 100%;
          font-size: 14px;
          font-weight: bold;
        }
        .change-btn{
          display: flex;
          justify-content: center;
          align-items: center;
          min-width: 54px;
          height: 20px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          margin-left: 12px;
          background: #00B7EE;
          border-radius: 10px;
        }
        .class-bottom{
          width: 100%;
          display: flex;
          margin-top: 6px;
          p{
            display: flex;
            align-items: center;
            width: 50%;
            font-size: 12px;
            color: #666;
            overflow: hidden;
            img{
              width: 16px;
              min-width: 16px;
              height: 16px;
              display: block;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
